<template>
  <el-card class="introduce">
    <div class="stockDetails">
      
    </div>
    <div ref="myChart" :class="chart" id="zoom"></div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      chart: null,
      timer: null,
      dataForm: {
        usableLC: '0',
        bookLC: '0',
        usedLC: '0',
        todayUP: '0',
        todayDown: '0'
      },
      stockDetails: null,
      spuList: [],
      totalStockList: [],
      usableStockList: [],
      //指定表的配置项和数据
      option: {
        title: {
          text: '库存详情',
        },

        legend: {
          data: ['总库存', '可用库存'],
          textStyle: {
            fontSize: '20px'
          }
        },
        xAxis: {
          type: 'category',
          data: ['P0219223', 'P0223290', 'X01-28100021', 'LJ9C-5K067-APA', 'LJ9C-5K067-BPA', 'LJ9C-5C145-APA'],
          axisLabel: {
            interval: 0,
            rotate: 15,
            inside: false,
            textStyle: {
              fontSize: 16
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总库存',
            data: [0, 0, 0, 0, 0, 0],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'black',
                    fontSize: 25,
                  }
                }
              }
            }
          },
          {
            name: '可用库存',
            data: [0, 0, 0, 0, 0, 0],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(150, 150, 150, 0.2)'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'black',
                    fontSize: 25
                  }
                }
              }
            }
          },

        ]
      },
    }
  },
  mounted() {
    // this.getHomeShow();
  },
  created() {
    //每次进入页面时，先清除所有定时器，然后再启动新的定时器
    // clearInterval(this.timer);
    // this.timer = null;
    // this.setTimer();
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    setTimer() {
      if (this.timer == null) {
        this.timer = setInterval(() => {
          this.getHomeShow();
          
        }, 1000 * 60)
      }
    },
    getHomeShow() {
      this.$http.get(`/wms/location/home`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm.usableLC = res.data.usableLC;
        this.dataForm.usedLC = res.data.usedLC;
        this.dataForm.bookLC = res.data.bookLC;
        this.dataForm.todayUP = res.data.todayUP;
        this.dataForm.todayDown = res.data.todayDown;
        this.stockDetails = res.data.stockDetailList;
        //清空列表数据
        this.spuList = [];
        this.totalStockList = [];
        this.usableStockList = [];
        //重新赋值
        this.stockDetails.forEach(item => {
          this.spuList.push(item.spuNo);
          this.totalStockList.push(item.stockQnty);
          this.usableStockList.push(item.usableQnty);
        });
        this.chartsChange();
      }).catch(() => { })
    },
    chartsChange() {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.myChart);
      }
      this.option.xAxis.data = this.spuList;
      this.option.series[0].data = this.totalStockList;
      this.option.series[1].data = this.usableStockList;

      this.chart.clear();
      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(this.option, true);
    }
  }
}
</script>

<style>
.box-card {
  padding: 1 1px;
  font-size: 35px;
}

.itemData {
  margin-top: 5px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
  font-weight: bolder;
  background-color: dimgrey;
  color: aliceblue;
}

#zoom {
  margin-top: 20px;
  min-height: 500px;
}
</style>